<template>
  <div 
    id="app" 
    class="min-h-screen"
  >
    <!-- 应用主体 -->
    <router-view />
    
    <!-- 全局通知显示 -->
    <NotificationDisplay />
    
    <!-- AI悬浮球助手 -->
    <AIFloatingBall />
    
    <!-- 全局加载提示 -->
    <div
      v-if="appStore.isLoading"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
    >
      <div class="bg-white rounded-lg p-6 shadow-lg">
        <div class="flex items-center space-x-3">
          <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600" />
          <span class="text-gray-700">加载中...</span>
        </div>
      </div>
    </div>
    
    <!-- 全局错误提示 -->
    <div
      v-if="appStore.error"
      class="fixed top-4 right-4 z-50 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded shadow-lg"
    >
      <div class="flex items-center justify-between">
        <span>{{ appStore.error }}</span>
        <button
          class="ml-2 text-red-500 hover:text-red-700"
          @click="appStore.clearError"
        >
          ×
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import NotificationDisplay from '@/components/common/NotificationDisplay.vue'
import AIFloatingBall from '@/components/ai/AIFloatingBall.vue'

const appStore = useAppStore()
</script>

<style>
/* 全局样式在 styles/main.css 中定义 */
</style>
